<template>
	<view class="charts-power">
		<uni-card padding="0" spacing="0" margin="6px">
			<uni-list>
				<uni-list-item>
					<template v-slot:body>
						<view class="top">
							<view class="top_left">
								<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
							</view>
							<view class="list_item">
								<view>
									<view class="item_title">当前总功率</view>
									<view class="item_number"><text>{{powerList.allActivePower||'--'}}</text>KW</view>
								</view>
								<view>
									<view class="item_title">装机容量</view>
									<view class="item_number"><text>{{powerList.allCapacity||'--'}} </text> KWp</view>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<view class="bottom">
							<view class="list_item">
								<view>
									<view class="item_title">当日发电量</view>
									<view class="item_number"><text>{{powerList.dayPower||'--'}}</text> KWh</view>
								</view>
								<view>
									<view class="item_title">当年发电量</view>
									<view class="item_number"><text>{{powerList.yearPower||'--'}}</text> KWh</view>
								</view>
							</view>
							<view class="list_item">
								<view>
									<view class="item_title">当月发电量</view>
									<view class="item_number"><text>{{powerList.monthPower||'--'}}</text> KWh</view>
								</view>
								<view>
									<view class="item_title">累计发电量</view>
									<view class="item_number"><text>{{powerList.allPower||'--'}}</text> KWh</view>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
	import {
		getPowerOverview,
		getAllPowerHistory
	} from "@/common/api/api.js"
	export default {
		data() {
			const date = new Date()
			const year = date.getFullYear()
			return {
				year,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "0%",
						fontSize: 20,
						color: "#000"
					},
					subtitle: {
						name: "",
						fontSize: 12,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				powerList: {
					allActivePower: "--",
					yearPower: "--",
					powerRate: "--",
					allCapacity: "--",
					monthPower: "--",
					allPower: "--",
					dayPower: "--"
				}
			};
		},
		mounted() {
			this.getServerData();
			this.getMonthAndYear()
		},
		methods: {
			async getServerData() {
				const token = uni.getStorageSync('Token')
				let res = await getPowerOverview({
					token
				})
				this.powerList = res.data
				if (this.powerList.allActivePower) {
					this.powerList.allActivePower = (this.powerList.allActivePower / 1000).toFixed(2)
				}
				this.powerList.allCapacity = (this.powerList.allCapacity).toFixed(2)
				let n = (this.powerList.allActivePower / this.powerList.allCapacity/100).toFixed(2)
				let data = {
					series: [{
						color: "#1890FF",
						data: n
					}]
				};
				this.opts.title.name = (this.powerList.allActivePower / this.powerList.allCapacity * 100).toFixed(2) + "%"
				this.chartData = JSON.parse(JSON.stringify(data));
			},
			// 查询年月发电历史
			async getMonthAndYear() {
				const token = uni.getStorageSync('Token')
				let params = {
					token,
					timeType: 2,
					startTime: `${this.year}-01-01 00:00:00`,
					endTime: `${this.year}-12-31 00:00:00`
				}
				let res = await getAllPowerHistory(params)
				let data = new Array(31).fill(0)
				let yearSum = 0
				res.data.forEach((item) => {
					let index = Object.keys(item)[0].slice(-2) * 1 - 1
					data[index] = Object.values(item)[0]
					yearSum += Number(data[index])
				})
				this.powerList.yearPower = yearSum
				// 月取最后一个
				this.powerList.monthPower = Object.values(res.data[res.data.length - 1])[0]
			},
		}
	};
</script>

<style scoped lang="scss">
	.charts-power {
		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.top_left {
				width: 50%;
				background-color: #f8f9fe;
				border-radius: 50%;
				height: 310rpx;
			}
		}

		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.list_item {
			&>view {
				padding: 20rpx;
			}

			text-align: center;
			width: 50%;
			margin: 0 auto;

			.item_title {
				color: #b7b8bd;
				font-size: 24rpx;
			}

			.item_number {
				color: #b7b8bd;
				font-size: 24rpx;

				text {
					color: #50545f;
					font-weight: bold;
					font-size: 32rpx;
					margin-right: 4rpx;
				}
			}
		}
	}
</style>